<template>
  <div class="login">
    <div class="logo"></div>
    <div class="login-box">
      <p class="title">身份验证</p>
      <el-input
        v-model="user"
        style="width: 60%; height: 10%; margin-bottom: 7%"
        placeholder="请输入手机号"
      />
      <el-button
        style="margin-bottom: 7%; height: 10%; width: 25%;background-color: rgb(172, 96, 57);color: white; font-weight: 700;"
        @click="fetch_yzm()"
        :disabled="is_countdown_type ? true : false"
        >{{ !is_countdown_type ? '获取验证码' : countdown + 's' }}</el-button
      >
      <el-input
        v-model="yzm"
        style="width: 84%; height: 10%; margin-bottom: 7%"
        placeholder="请输入验证码"
      /><br />
      <p class="forget" >手机无法接收验证码？点击这里</p>
      <br />
      <el-button style="width:80%; background-color: rgb(172, 96, 57);color: white; font-weight: 700;" @click="judgment_yzm()">确认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import '../DQJ/Css/Login.css'
import {geta} from '@/request/api/api.ts'
import { ref } from 'vue'
const router = useRouter()
let user = ref('')
let yzm = ref('')
let countdown = ref(60)
let is_countdown_type = ref(false)
let getuseryzm =ref('1234')



// 倒计时获取验证码
let fetch_yzm = async () => {
  if (user.value === '') {
    ElMessage({
      message: '请输入手机号',
      type: 'warning'
    })
    // 判断手机号格式是否正确
  } else if (
    !/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(
      user.value
    )
  ) {
    ElMessage({
      message: '手机号格式错误',
      type: 'warning'
    })
  } else {
    is_countdown_type.value = true
    let data:any = await geta({bind_contact:user.value})
    getuseryzm.value=data.len
    // console.log(getuseryzm.value);
    
    let a = setInterval(() => {
      countdown.value--
      if (countdown.value == 0) {
        clearInterval(a)
        countdown.value = 60
        is_countdown_type.value = false
      }
    }, 1000)
  }
}

// 判断验证码是否正确
const judgment_yzm=()=>{
  if(yzm.value==getuseryzm.value){
    router.push(`/Updata_password?bind_contact=${user.value}`)
    ElMessage({
      message: '验证码正确',
      type: 'success'
    })
  }else{
    ElMessage({
      message: '验证码有误',
      type: 'warning'
    })
  }
}
</script>

<style>
</style>